<template>
    <div class="material-list">
        <!-- 页面标题和操作按钮 -->
        <div class="page-header">
            <div class="header-title">
                <h2>原料清单</h2>
                <p>管理所有原材料的基本信息和规格参数</p>
            </div>
            <div class="header-actions">
                <el-button type="primary" @click="handleAdd">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    新增原料
                </el-button>
            </div>
        </div>

        <!-- 搜索和筛选 -->
        <el-card class="search-card" shadow="never">
            <el-form :model="searchForm" :inline="true" class="search-form">
                <el-form-item label="原料编码">
                    <el-input v-model="searchForm.materialCode" placeholder="请输入原料编码" clearable />
                </el-form-item>
                <el-form-item label="原料名称">
                    <el-input v-model="searchForm.materialName" placeholder="请输入原料名称" clearable />
                </el-form-item>
                <el-form-item label="原料类型">
                    <el-select v-model="searchForm.materialType" placeholder="请选择类型" clearable>
                        <el-option label="金属材料" value="metal" />
                        <el-option label="塑料材料" value="plastic" />
                        <el-option label="化工原料" value="chemical" />
                        <el-option label="电子元件" value="electronic" />
                    </el-select>
                </el-form-item>
                <el-form-item label="供应商">
                    <el-select v-model="searchForm.supplier" placeholder="请选择供应商" clearable>
                        <el-option label="供应商A" value="supplier_a" />
                        <el-option label="供应商B" value="supplier_b" />
                        <el-option label="供应商C" value="supplier_c" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">
                        <el-icon>
                            <Search />
                        </el-icon>
                        搜索
                    </el-button>
                    <el-button @click="handleReset">
                        <el-icon>
                            <Refresh />
                        </el-icon>
                        重置
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 数据表格 -->
        <el-card class="table-card" shadow="never">
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column prop="materialCode" label="原料编码" width="120" />
                <el-table-column prop="materialName" label="原料名称" width="150" />
                <el-table-column prop="materialType" label="类型" width="100">
                    <template #default="scope">
                        <el-tag :type="getTypeColor(scope.row.materialType)">
                            {{ getTypeName(scope.row.materialType) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="specification" label="规格" width="120" />
                <el-table-column prop="unit" label="单位" width="80" />
                <el-table-column prop="currentStock" label="当前库存" width="100" align="right">
                    <template #default="scope">
                        {{ scope.row.currentStock.toLocaleString() }}
                    </template>
                </el-table-column>
                <el-table-column prop="safetyStock" label="安全库存" width="100" align="right">
                    <template #default="scope">
                        {{ scope.row.safetyStock.toLocaleString() }}
                    </template>
                </el-table-column>
                <el-table-column prop="unitPrice" label="单价(元)" width="100" align="right">
                    <template #default="scope">
                        ¥{{ scope.row.unitPrice.toFixed(2) }}
                    </template>
                </el-table-column>
                <el-table-column prop="supplier" label="主要供应商" width="120" />
                <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                        <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
                            {{ scope.row.status === 'active' ? '启用' : '停用' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" fixed="right">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="handleEdit(scope.row)">
                            编辑
                        </el-button>
                        <el-button type="success" size="small" @click="handleView(scope.row)">
                            查看
                        </el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-wrapper">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]" :total="total" layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Plus, Search, Refresh } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 搜索表单
const searchForm = reactive({
    materialCode: '',
    materialName: '',
    materialType: '',
    supplier: ''
})

// 表格数据
const tableData = ref([
    {
        id: 1,
        materialCode: 'M001',
        materialName: '钢板Q235',
        materialType: 'metal',
        specification: '10mm*2000*6000',
        unit: '张',
        currentStock: 150,
        safetyStock: 50,
        unitPrice: 2800.00,
        supplier: '钢铁供应商A',
        status: 'active'
    },
    {
        id: 2,
        materialCode: 'M002',
        materialName: 'ABS塑料',
        materialType: 'plastic',
        specification: '颗粒状',
        unit: 'kg',
        currentStock: 2500,
        safetyStock: 500,
        unitPrice: 12.50,
        supplier: '塑料供应商B',
        status: 'active'
    },
    {
        id: 3,
        materialCode: 'M003',
        materialName: '硫酸铜',
        materialType: 'chemical',
        specification: '99%纯度',
        unit: 'kg',
        currentStock: 80,
        safetyStock: 100,
        unitPrice: 45.00,
        supplier: '化工供应商C',
        status: 'active'
    }
])

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(156)

// 获取类型颜色
const getTypeColor = (type: string) => {
    const colorMap: Record<string, string> = {
        metal: 'primary',
        plastic: 'success',
        chemical: 'warning',
        electronic: 'info'
    }
    return colorMap[type] || 'info'
}

// 获取类型名称
const getTypeName = (type: string) => {
    const nameMap: Record<string, string> = {
        metal: '金属材料',
        plastic: '塑料材料',
        chemical: '化工原料',
        electronic: '电子元件'
    }
    return nameMap[type] || '未知'
}

// 处理搜索
const handleSearch = () => {
    console.log('搜索条件:', searchForm)
    ElMessage.success('搜索完成')
}

// 处理重置
const handleReset = () => {
    Object.assign(searchForm, {
        materialCode: '',
        materialName: '',
        materialType: '',
        supplier: ''
    })
    ElMessage.success('重置完成')
}

// 处理新增
const handleAdd = () => {
    console.log('新增原料')
    ElMessage.info('打开新增原料对话框')
}

// 处理编辑
const handleEdit = (row: any) => {
    console.log('编辑:', row)
    ElMessage.info(`编辑原料: ${row.materialName}`)
}

// 处理查看
const handleView = (row: any) => {
    console.log('查看:', row)
    ElMessage.info(`查看原料详情: ${row.materialName}`)
}

// 处理删除
const handleDelete = (row: any) => {
    ElMessageBox.confirm(
        `确认删除原料 "${row.materialName}" 吗？`,
        '确认删除',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        console.log('删除:', row)
        ElMessage.success('删除成功')
    }).catch(() => {
        ElMessage.info('已取消删除')
    })
}

// 处理页码变化
const handleCurrentChange = (page: number) => {
    currentPage.value = page
    console.log('当前页:', page)
}

// 处理每页条数变化
const handleSizeChange = (size: number) => {
    pageSize.value = size
    console.log('每页条数:', size)
}

onMounted(() => {
    console.log('原料清单页面已加载')
})
</script>

<style scoped>
.material-list {
    padding: 0;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

.header-title h2 {
    margin: 0 0 5px 0;
    color: #303133;
    font-size: 24px;
    font-weight: 600;
}

.header-title p {
    margin: 0;
    color: #909399;
    font-size: 14px;
}

.search-card {
    margin-bottom: 20px;
}

.search-form {
    margin-bottom: 0;
}

.table-card {
    margin-bottom: 0;
}

.pagination-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
</style>
